import React, { useEffect } from "react";
import { useSelector } from "react-redux"
import { useImmer } from "use-immer"
import Taro, { getCurrentInstance } from "@tarojs/taro";
import api from "@/api"
import doc from "@/doc"
import { AtTabs, AtInput, AtTextarea } from 'taro-ui'
import { SpNavBar, SpButton, SpCell, SpCheckbox, SpImage, SpInputNumber, SpSelect, SpUpload, SpPrice } from '@/components'
import { View, Text, Picker, Image } from "@tarojs/components"
import { pickBy, showToast, isNumber } from '@/utils'
import CompTradeInfo from './../cancel-trade/comps/comp-trade-info'
import FormImageItem from './../../good/comps/form-image-item'
import './sale-after.scss'

const initialState = {
  tradeId: '',
  info: null,
  curTabIdx: 0,
  tabList: [
    { title: '仅退款', status: 'ONLY_REFUND' },
    { title: '退货退款', status: 'REFUND_GOODS' }
  ],
  reason: '',
  reasons: [
    '客户现在不想购买',
    '客户商品价格较贵',
    '客户价格波动',
    '客户商品缺货',
    '客户重复下单',
    '客户订单商品选择有误',
    '客户支付方式选择有误',
    '客户收货信息填写有误',
    '客户发票信息填写有误',
    '客户无法支付订单',
    '客户长时间未付款',
    '客户其他原因'
  ],
  refundFee: 0,
  refundPoint: 0,
  goodsReturned: [1],
  goodsReturnedList: [
    { id: 1, name: '快递发货' },
    { id: 2, name: '到店退货(店员已验货)' }
  ],
  description: '',
  pic: ''
}

function DianwuTradeSaleAfter(props) {
  const $instance = getCurrentInstance()
  const [state, setState] = useImmer(initialState)
  const { tradeId, info, curTabIdx, tabList, reason, reasons, refundFee, refundPoint, goodsReturned, goodsReturnedList, description, pic } = state

  useEffect(() => {
    if (info) {
      const { items } = info
      setState(draft => {
        draft.refundFee = items
          .filter((item) => item.checked)
          .reduce((sum, { totalFee, num, refundNum }) => sum + totalFee / num * refundNum, 0)
      })
    }
  }, [info])

  const onCancel = () => {
    Taro.navigateBack()
  }

  const onConfirm = async () => {
    console.log(reason, pic)
    if (reason.length <= 0) {
      console.log('请选择退款原因')
      Taro.showToast({
        title: '请选择退款原因',
        icon: 'none'
      })
      return

    }
    const { trade_id } = $instance.router.params
    const [img] = pic || []
    const items = info?.items.filter(item => item.checked).map(item => {
      return {
        id: item.id,
        num: item.refundNum
      }
    })
    if (items.length == 0) {
      Taro.showToast({
        title: '请选择需要售后的商品',
        icon: 'none'
      })
      return
    }
    console.log(isNumber(refundFee), refundFee)
    if (!isNumber(refundFee)) {
      Taro.showToast({
        title: '请填写退款金额',
        icon: 'none'
      })
      return
    }
    if (refundFee > getRealRefundFee()) {
      Taro.showToast({
        title: '退款金额超过实际可退金额',
        icon: 'none'
      })
      return
    }
    if (!isNumber(refundPoint)) {
      Taro.showToast({
        title: '请填写积分',
        icon: 'none'
      })
      return
    }
    const params = {
      order_id: trade_id,
      aftersales_type: tabList[curTabIdx].status,
      goods_returned: goodsReturned[0] == 2,
      reason: reasons?.[reason],
      detail: JSON.stringify(items),
      refund_fee: refundFee * 100,
      refund_point: refundPoint,
      description,
      evidence_pic: [img]
    }
    await api.dianwu.salesAfterApply(params)
    let type = 3
    if (params.aftersales_type == 'ONLY_REFUND') {
      type = 3
    } else if (params.aftersales_type == 'REFUND_GOODS' && !params.goods_returned) {
      type = 4
    } else if (params.aftersales_type == 'REFUND_GOODS' && params.goods_returned) {
      type = 5
    }
    // Taro.redirectTo({ url: `/subpages/dianwu/trade/result?type=${type}` })
    // showToast('订单取消成功')
    // setTimeout(() => {
    //   Taro.navigateBack()
    // }, 2000)
    Taro.navigateBack()
  }

  const onChangeItemCheck = (item, index, e) => {
    setState(draft => {
      draft.info.items[index].checked = e
    })
  }

  const onChangeItemNum = (e, index) => {

    setState(draft => {
      draft.info.items[index].refundNum = e
    })
  }

  const getRealRefundFee = () => {
    let rFee = 0
    if (info) {
      const { items } = info
      rFee = items
        .filter((item) => item.checked)
        .reduce((sum, { totalFee, num, refundNum }) => sum + totalFee / num * refundNum, 0)
    }

    return rFee
  }

  return <View>
    <SpNavBar title='发起售后'></SpNavBar>
    <View className="page-dianwu-sale-after">
      <AtTabs
        current={curTabIdx}
        tabList={tabList}
        onClick={(e) => {
          setState(draft => {
            draft.curTabIdx = e
          })
        }}
      />
      <CompTradeInfo onFetch={(data) => {
        setState(draft => {
          draft.info = data
        })
      }} />

      <View className='picker-reason'>
        <Picker
          mode='selector'
          range={reasons}
          onChange={(e) => {
            setState(draft => {
              draft.reason = e.detail.value
            })
          }}
        >
          <SpCell title='退款原因' isLink value={<Text>{`${reasons?.[reason] || '请选择取消原因'}`}</Text>}></SpCell>
        </Picker>
      </View>

      <View className='refund-items'>
        <View className='title'>退款商品</View>
        <View className='items-container'>
          {
            info?.items.map((item, index) => (
              <View className='item-wrap' key={`item-wrap__${index}`}>
                <View className='item-hd'>
                  <SpCheckbox disabled={!item.leftAftersalesNum} checked={item.checked} onChange={onChangeItemCheck.bind(this, item, index)} />
                </View>
                <View className='item-bd'>
                  <Image
                    className='image-img'
                    src={item.pic}
                  // mode={mode}
                  // onError={onError}
                  // onLoad={handleOnLoad}
                  // lazyLoad={lazyLoad}
                  // showMenuByLongpress={isShowMenuByLongpress}
                  />
                  {/* <SpImage src={item.pic} width={128} height={128} radius={8} /> */}
                  <View className='goods-info'>
                    <View className='goods-info-hd'>
                      <Text className='goods-title'>{item.itemName}</Text>
                      <Text className='goods-num'>{`数量：${item.num}`}</Text>
                    </View>
                    <View><SpPrice value={item.totalFee / item.num} /></View>
                    <View className='goods-info-bd'>
                      <View className='sku-info'>{item.itmSpecDesc && <Text>{`规格：${item.itemSpecDesc}`}</Text>}</View>
                      <SpInputNumber
                        disabled={!item.leftAftersalesNum}
                        value={item.refundNum}
                        max={item.leftAftersalesNum} e
                        min={1}
                        onChange={(e) => onChangeItemNum(e, index)}
                      />
                    </View>
                  </View>
                </View>
              </View>
            ))
          }
        </View>
      </View>

      <View className='refund-amount'>
        <SpCell title='退款金额' value={<AtInput
          name='refund_fee'
          value={refundFee}
          onChange={(e) => {
            console.log(e)
            if (e.length <= 0) {
              setState(draft => {

                draft.refundFee = parseFloat(0)
              })
            } else {
              setState(draft => {

                draft.refundFee = parseFloat(e)
              })
            }

          }}
        />}></SpCell>
        <View className='cell-tip'>{`实际可退金额：${getRealRefundFee()}`}</View>
      </View>

      <View className='refund-point'>
        <SpCell title='退积分' value={<AtInput
          name='refund_point'
          value={refundPoint}
          onChange={(e) => {
            if (e.length <= 0) {
              setState(draft => {
                draft.refundPoint = parseFloat(0)
              })
            } else {
              setState(draft => {
                draft.refundPoint = parseFloat(e)
              })
            }
          }}
        />}></SpCell>
        <View className='cell-tip'>{`实际可退积分：${info?.refundPoint}`}</View>
      </View>

      {curTabIdx == 1 && <View className='return-goods-type'>
        <SpCell title='回寄方式' value={<SpSelect
          info={goodsReturnedList}
          value={goodsReturned}
          onChange={(e) => {
            setState((draft) => {
              draft.goodsReturned = e
            })
          }}
        />}></SpCell>
      </View>}

      <View className='desc-container'>
        <View className='title'>补充描述和凭证（选填）</View>
        <View className='desc-content'>
          <AtTextarea className="desc-content-textarea" type='textarea' name='description' value={description} placeholder='添加描述' maxLength={200} onChange={(e) => {
            setState(draft => {
              draft.description = e
            })
          }} />
          {/* <SpUpload
            value={pic}
            multiple={false}
            onChange={(val) => {
              setState((draft) => {
                draft.pic = val
              })
            }}
          /> */}
          <FormImageItem
            key='166'
            label='商品图片(选填)'
            desc='(最多上传5张图片）'
            required
            placeholder='请选择商品图片'
            onChange={(val) => {
              setState((draft) => {
                draft.pic = val
              })
            }}
            value={pic}
          />
        </View>
      </View>
      <View className='btn-wrap'>
        <SpButton confirmText='提交' onReset={onCancel} onConfirm={onConfirm} />
      </View>
    </View>

  </View>
}

DianwuTradeSaleAfter.options = {
  addGlobalClass: true
}

export default DianwuTradeSaleAfter
